<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QQ音乐推荐页</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <!-- 头部 Logo 区域 -->
      <header>
        <img src="\image\qqmusic.png" alt="QQ音乐" class="logo" />
      </header>

      <!-- 歌单推荐板块 -->
      <section class="playlist-section">
        <h2>歌单推荐</h2>
        <nav class="playlist-nav">
          <ul>
            <li class="active">为你推荐</li>
            <li>运动</li>
            <li>网络歌曲</li>
            <li>思念</li>
            <li>官方歌单</li>
            <li>情歌</li>
          </ul>
        </nav>
        <div class="playlist-list">
          <div class="playlist-item">
            <img src="\image\1.jpg" alt="歌单封面" />
            <p>翻唱女神J.Fla | 只唱你最爱的旋律</p>
            <span>播放量：854.0万</span>
          </div>
          <div class="playlist-item">
            <img src="\image\2.jpg" alt="歌单封面" />
            <p>古风女声控，优美旋律为你而来</p>
            <span>播放量：171.2万</span>
          </div>
          <div class="playlist-item">
            <img src="\image\3.jpg" alt="歌单封面" />
            <p>想开一家早橘店，叫早点见面</p>
            <span>播放量：52.0万</span>
          </div>
          <div class="playlist-item">
            <img src="\image\4.jpg" alt="歌单封面" />
            <p>好评999+英文歌！轻松解压100%</p>
            <span>播放量：12391.0万</span>
          </div>
          <div class="playlist-item">
            <img src="\image\5.jpg" alt="歌单封面" />
            <p>书摘背景乐|沉浸于字里行间的时光</p>
            <span>播放量：303.3万</span>
          </div>
        </div>
      </section>

      <!-- 新歌首发板块 -->
      <section class="new-song-section">
        <h2>新歌首发</h2>
        <div class="play-all">
          <button>播放全部</button>
        </div>
        <nav class="new-song-nav">
          <ul>
            <li class="active">最新</li>
            <li>内地</li>
            <li>港台</li>
            <li>欧美</li>
            <li>韩国</li>
            <li>日本</li>
          </ul>
        </nav>
        <div class="new-song-list">
          <div class="song-item">
            <img src="\image\6.png" alt="歌曲封面" />
            <div class="song-info">
              <h3>Sabotage</h3>
              <p>Bebe Rexha</p>
            </div>
            <div class="song-time">02:56</div>
          </div>
          <div class="song-item">
            <img src="\image\9.png" alt="歌曲封面" />
            <div class="song-info">
              <h3>如果人人爱音乐</h3>
              <p>张蔷</p>
            </div>
            <div class="song-time">03:46</div>
          </div>
          <div class="song-item">
            <img src="\image\11.png" alt="歌曲封面" />
            <div class="song-info">
              <h3>你就不要想起我</h3>
              <p>R1SE赵磊</p>
            </div>
            <div class="song-time">04:30</div>
          </div>
          <div class="song-item">
            <img src="\image\7.png" alt="歌曲封面" />
            <div class="song-info">
              <h3>软肋</h3>
              <p>李宇春</p>
            </div>
            <div class="song-time">04:17</div>
          </div>
          <div class="song-item">
            <img src="\image\10.png" alt="歌曲封面" />
            <div class="song-info">
              <h3>一爱如故《长歌行》电视剧插曲</h3>
              <p>摩登兄弟刘宇宁</p>
            </div>
            <div class="song-time">03:55</div>
          </div>
          <div class="song-item">
            <img src="\image\13.png" alt="歌曲封面" />
            <div class="song-info">
              <h3>向宿命挥拳的人《新斗罗大陆》</h3>
              <p>阿云嘎</p>
            </div>
            <div class="song-time">04:00</div>
          </div>
          <div class="song-item">
            <img src="\image\8.png" alt="歌曲封面" />
            <div class="song-info">
              <h3>花好月圆</h3>
              <p>周迅</p>
            </div>
            <div class="song-time">02:34</div>
          </div>
          <div class="song-item">
            <img src="\image\12.png" alt="歌曲封面" />
            <div class="song-info">
              <h3>Renegades《浪客剑心 最终章》</h3>
              <p>ONE OK ROCK</p>
            </div>
            <div class="song-time">04:04</div>
          </div>
          <div class="song-item">
            <img src="\image\14.png" alt="歌曲封面" />
            <div class="song-info">
              <h3>驯化者</h3>
              <p>陈俊豪 / 陈誉庚 / TGM-姜</p>
            </div>
            <div class="song-time">03:28</div>
          </div>
        </div>
      </section>

      <!-- MV 板块 -->
      <section class="mv-section">
        <h2>MV</h2>
        <nav class="mv-nav">
          <ul>
            <li class="active">精选</li>
            <li>内地</li>
            <li>韩国</li>
            <li>港台</li>
            <li>欧美</li>
            <li>日本</li>
          </ul>
        </nav>
        <div class="mv-list">
          <div class="mv-item">
            <img src="\image\15.png" alt="MV封面" />
            <p>向宿命挥拳的人《新斗罗大陆》</p>
            <span>阿云嘎</span>
            <div class="view-group">
              <span>♪ 1.1万</span>
            </div>
          </div>
          <div class="mv-item">
            <img src="\image\16.png" alt="MV封面" />
            <p>雨</p>
            <span>Sunnee杨芸晴</span>
            <span>♪ 3334</span>
          </div>
          <div class="mv-item">
            <img src="\image\17.png" alt="MV封面" />
            <p>一爱如故《长歌行》电视剧插曲</p>
            <span>摩登兄弟刘宇宁</span>
            <span>♪ 4.2万</span>
          </div>
          <div class="mv-item">
            <img src="\image\18.png" alt="MV封面" />
            <p>我得好骗</p>
            <span>动力火车</span>
            <span>♪ 11万</span>
          </div>
          <div class="mv-item">
            <img src="\image\19.png" alt="MV封面" />
            <p>追梦时学会飞行《声梦传奇》主</p>
            <span>TVB</span>
            <span>♪ 1483</span>
          </div>
          <div class="mv-item">
            <img src="\image\20.png" alt="MV封面" />
            <p>What's Wrong With Me (Punk V...</p>
            <span>Li Ghost小鬼</span>
            <span>♪ 20.2万</span>
          </div>
          <div class="mv-item">
            <img src="\image\21.png" alt="MV封面" />
            <p>Let's Party《和平精英》2周年庆</p>
            <span>莫文蔚</span>
            <span>♪ 6.6万</span>
          </div>
          <div class="mv-item">
            <img src="\image\22.png" alt="MV封面" />
            <p>緑の羽根</p>
            <span>RADWIMPS</span>
            <span>♪ 2861</span>
          </div>
          <div class="mv-item">
            <img src="\image\23.png" alt="MV封面" />
            <p>에필로그 (Epilogue)</p>
            <span>IU</span>
            <span>♪ 7955</span>
          </div>
          <div class="mv-item">
            <img src="\image\24.png" alt="MV封面" />
            <p>圭贤《Coffee》MV</p>
            <span>圭贤</span>
            <span>♪ 1.5万</span>
          </div>
        </div>
      </section>
    </div>
  </body>
</html>
